﻿﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>元宵节</title>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
  <link rel="stylesheet" href="static/css/swiper.min_1.css">
  <link rel="stylesheet" href="static/css/animate.min_1.css">
  <link rel="stylesheet" href="static/css/style.css">
  <script src="static/js/swiper.min.js"></script>
  <script src="static/js/swiper.animate.min.js"></script>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <section class="swiper-slide">

        <img src="static/picture/s1-t2.png" class="ani resize"
          style="width:100px;height:110px;left:70px;top:185px;z-index:3;" swiper-animate-effect="fadeIn"
          swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
        <img src="static/picture/s1-t1.png" class="ani resize"
          style="width:60px;height:110px;left:220px;top:185px;z-index:3;" swiper-animate-effect="bounceIn"
          swiper-animate-duration="0.5s" swiper-animate-delay="1s">
        <img src="static/picture/flower.png" class="ani resize" style="width:180px;height:220px;left:0;top:0;z-index:2;"
          swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
        <img src="static/picture/s1.png" class="ani resize"
          style="width:320px;height:200px;left:0px;top:140px;z-index:1;" swiper-animate-effect="fadeIn"
          swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">

      </section>
      <!---------------slide2-------------->
      <section class="swiper-slide">
        <img src="static/picture/s2-i5.png" class="ani resize"
          style="width:263px;height:177px;left:31px;top:262px;z-index:5; border-radius:20px;"
          swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
        <img src="static/picture/s2-i4.png" class="ani resize"
          style="width:195px;height:163px;left:31px;top:48px;z-index:4;" swiper-animate-effect="fadeInRight"
          swiper-animate-duration="0.5s" swiper-animate-delay="1.3s">
        <img src="static/picture/s2-i3.png" class="ani resize"
          style="width:212px;height:186px;left:24px;top:36px;z-index:3;" swiper-animate-effect="fadeInLeft"
          swiper-animate-duration="0.5s" swiper-animate-delay="1s">
        <img src="static/picture/s2-i2.png" class="ani resize"
          style="width:64px;height:221px;left:237px;top:20px;z-index:2;" swiper-animate-effect="fadeInUp"
          swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
        <img src="static/picture/s2-i1.png" class="ani resize"
          style="width:42px;height:192px;left:248px;top:27px;z-index:1;" swiper-animate-effect="fadeInDown"
          swiper-animate-duration="0.5s" swiper-animate-delay="0s">

      </section>
      <!----------------slide3-------------->
      <section class="swiper-slide">

        <img src="static/picture/s3-i5.png" class="ani resize"
          style="width:263px;height:177px;left:31px;top:262px;z-index:5; border-radius:20px;"
          swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
        <img src="static/picture/s3-i4.png" class="ani resize"
          style="width:195px;height:163px;left:31px;top:48px;z-index:4;" swiper-animate-effect="fadeInRight"
          swiper-animate-duration="0.5s" swiper-animate-delay="1.3s">
        <img src="static/picture/s2-i3.png" class="ani resize"
          style="width:212px;height:186px;left:24px;top:36px;z-index:3;" swiper-animate-effect="fadeInLeft"
          swiper-animate-duration="0.5s" swiper-animate-delay="1s">
        <img src="static/picture/s3-i2.png" class="ani resize"
          style="width:64px;height:221px;left:237px;top:20px;z-index:2;" swiper-animate-effect="fadeInUp"
          swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
        <img src="static/picture/s2-i1.png" class="ani resize"
          style="width:42px;height:192px;left:248px;top:27px;z-index:1;" swiper-animate-effect="fadeInDown"
          swiper-animate-duration="0.5s" swiper-animate-delay="0s">

      </section>
      <!-------------slide4----------------->
      <section class="swiper-slide">

        <div class="ani resize" style="width:120px;height:110px;left:110px;top:184px;z-index:3;"
          swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
          <div class="txt">
            <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">
              愿您羊年运旺福旺</p>
            <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">
              条条祝福给您送上</p>
            <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">
              美丽花灯传递吉祥</p>
            <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">
              圆圆汤圆味道芬芳</p>
          </div>

        </div>
        <div class="ani resize"
          style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;"
          swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
          <div class="txt">
            元<br>宵<br>节</div>
        </div>
        <img src="static/picture/flower.png" class="ani resize" style="width:180px;height:220px;left:0;top:0;z-index:2;"
          swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
        <img src="static/picture/s1.png" class="ani resize"
          style="width:320px;height:200px;left:0px;top:140px;z-index:1;" swiper-animate-effect="fadeIn"
          swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">

      </section>



    </div>

    <img src="static/picture/web-swipe-tip.png" style="width:20px;height:15px; top:460px; left:150px;" id="array"
      class="resize">
    <div class="swiper-pagination"></div>
  </div>


  <script>

    scaleW = window.innerWidth / 320;
    scaleH = window.innerHeight / 480;
    var resizes = document.querySelectorAll('.resize');
    for (var j = 0; j < resizes.length; j++) {
      resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW + 'px';
      resizes[j].style.height = parseInt(resizes[j].style.height) * scaleH + 'px';
      resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + 'px';
      resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px';

    }
    var scales = document.querySelectorAll('.txt');
    for (var i = 0; i < scales.length; i++) {
      ss = scales[i].style;
      ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform = ss.transform = 'translateX(' + scales[i].offsetWidth * (scaleW - 1) / 2 + 'px) translateY(' + scales[i].offsetHeight * (scaleH - 1) / 2 + 'px)scaleX(' + scaleW + ') scaleY(' + scaleH + ') ';
    }


    var mySwiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      pagination: {
        el: '.swiper-pagination',
      },
      mousewheel: true,
      on: {
        init: function () {
          swiperAnimateCache(this);
          swiperAnimate(this);
        },
        slideChangeTransitionEnd: function () {
          swiperAnimate(this);
        }
      }
    })         
  </script>
</body>

</html>